<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
    //全局组件

    //父==》子
    //1.先给父组件中绑定自定义的属性
    //2.在子组件中使用props接收父组件传递的数据
    //3.可以在子组件中任意使用

    //子==》父
    //1.在父组件绑定自定义的事件
    //2.在子组件中触发原生的事件 在函数中使用$emit触发自定义的childHandler
    Vue.component('Parent',{
        data() {
            return {
                msg:'我是父组件的数据'
            };
        },
        template:'<div>' +
            '<p>我是一个父组件</p>' +
            '<Child :childData = "msg" @childHandler="childHandler"/>' +
            '</div>',
        methods:{
            childHandler(val){
                console.log(val);
            }
        }
    });

    Vue.component('Child',{
        template:'<div>' +
            '<p>我是一个子组件</p>' +
            '<input type="text" v-model="childData" @input="changeValue(childData)"/>' +
            '</div>',
        props:['childData'],
        methods: {
            changeValue(val){
                this.$emit('childHandler',val)
            }
        }
    });

    //声子
    var App={
        components: {

        },
        template: '<div>我是入口组件<br>' +
            '<Parent/>' +
            '</div>'
    }

    new Vue({
        el:'#app',
        data(){
            return{

            }
        },
        components: {
            //挂子
            App
        },
        template: '<App/>'
    });
</script>
</body>
</html>
